<template>
	<view>
		<view class="tip" @click="ShowSelecter">{{Title}}</view>
		<view class="selecter" v-if="Show">
			<view class="tools">
				<view class="exit" @click="Show=false">取消</view>
				<view class="input"><input :placeholder="searchtip" @input="Filter" :value="Keyword"/></view>
				<view class="sure" @click="Sure">确定</view>
			</view>
			<picker-view class="picker-view" @change="PickChange" :value="Index">
				<picker-view-column>
					<view class="item" v-for="(item,index) in List" :key="item[keys]">{{item[name]}}</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"selecter",
		data() {
			return {
				Show:false,
				Title:'',
				Keyword:'',
				NewTitle:'',
				NewVal:'',
				Index:[0],
				List:[]
			};
		},
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			keys:{
				type: String,
				default: ''
			},
			name:{
				type: String,
				default: ''
			},
			val:{
				type: String,
				default: ''
			},
			searchtip:{
				type: String,
				default: '请输入搜索内容'
			}
		},
		mounted() {
			
		},
		watch:{			
			list(n){
				this.List=[...n]
				this.SetIndex();
			}
		},
		methods:{
			SetIndex(){
				this.List.forEach((item,index)=>{
					if(item[this.keys]==this.val){
						this.Index=[index];
						return;
					}
				});
				this.NewTitle=this.List[this.Index[0]][this.name];
				this.NewVal=this.List[this.Index[0]][this.keys];
				this.Title=this.NewTitle;
			},
			ShowSelecter(){
				this.Show=true;
			},
			Filter(e){
				this.List=[];
				this.Index=[0];
				this.Keyword=e.detail.value;
				if(e.detail.value.Trim()!=""){
					this.List.push(this.list[0]);
					this.list.forEach(item=>{
						if(item[this.name].indexOf(e.detail.value)>-1){
							this.List.push(item);
						}
					})
				}else{
					this.List=[...this.list]
				}
			},
			PickChange(e){
				if(e.detail.value.length>0){
					this.Index= e.detail.value;
					this.NewTitle=this.List[this.Index[0]][this.name];
					this.NewVal=this.List[this.Index[0]][this.keys];
				}
			},
			Sure(){
				this.list.forEach((item,index)=>{
					if(item[this.keys]==this.NewVal){
						this.$emit('change', index);
						return;
					}
				});				
				this.Title = this.NewTitle;
				this.Show=false; 
			}
		}
	}
</script>

<style lang="scss">
	.tip{width:100%; height:100rpx; line-height: 100rpx; overflow: hidden; padding-right: 30rpx;} 
	.tip::after {
		font-family: cuIcon;
		display: block;
		content: "\e6a3";
		position: absolute;
		font-size: 34rpx;
		color: #8799a3;
		width: 60upx;
		text-align: center;
		top: 0rpx; 
		bottom: 0;
		right: -20upx;
		margin: auto;
	}
	.selecter{
		width:100%;
		height: 100vh;
		position: fixed;
		left:0rpx;
		bottom: 0rpx;
		z-index: 99999999;
		background-color: #ffffff;
	}
	.tools{width:100%; height:100rpx; line-height: 100rpx; padding:15rpx; display: flex; flex-direction: row; justify-content: space-between;
		.exit{width:100rpx; height: 70rpx; line-height: 70rpx; text-align: center; background-color:#cfcfcf; color:#ffffff; border-radius: 10rpx;}
		.input{background-color: #f6f4f4; color:#000000; width:500rpx; height:70rpx; line-height: 70rpx; padding-left:20rpx; padding-right: 20rpx; border-radius: 10rpx; input{height:70rpx; line-height: 70rpx; }}
		.sure{width:100rpx; height: 70rpx; line-height: 70rpx; text-align: center; background-color:#127bfe; color:#ffffff; border-radius: 10rpx;}
	}
	.picker-view {
		width: 750rpx;
		height: 100vh;
		margin-top: 20rpx;
	}
	.item {
		line-height: 34px;
		text-align: center;
		color:#000000;
	}
</style>